<template>
  <el-card>
    <!-- 答卷管理标题 -->
    <template #header>
      <h2>答卷管理</h2>
    </template>
    <!-- 答卷管理内容展示 -->
    <div>
      <el-table :data="papers" border stripe>
        <el-table-column align="center" prop="papername" label="问卷名称" width="100"></el-table-column>
        <el-table-column align="center" prop="classname" label="班级" width="180"></el-table-column>
        <el-table-column align="center" prop="ctime" label="日期" width="100">
          <template #default="{row}">{{moment(row.ctime).locale('zh-cn').fromNow()}}</template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="450">
          <template #default="{row}">
            <el-button type="primary" @click="publish(row._id)">
              发布<i class="el-icon-s-promotion"></i>
            </el-button>
            <el-button type="primary"
            @click="answerSheet(row._id, row.papername)">
              查看答卷<i class="el-icon-tickets"></i>
            </el-button>
            <el-button type="success"
            @click="analysis(row._id, row.papername)">
              分析<i class="el-icon-magic-stick"></i>
            </el-button>
            <el-button type="danger" @click="del(row._id)">
              删除<i class="el-icon-delete"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @current-change="change" style="margin:15px 0" :page-size="perPage"
      :total="count" background layout="prev, pager, next"></el-pagination>
    </div>
  </el-card>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
import moment from 'moment';

const { mapActions, mapState } = createNamespacedHelpers('answers');
const { mapActions: mapActionsPapers, mapState: mapStatePapers } = createNamespacedHelpers('papers');

export default {
  data() {
    return {
      page: 1,
      perPage: 3,
    };
  },
  computed: {
    params() {
      const p = {
        page: this.page,
        perPage: this.perPage,
      };
      return p;
    },
    ...mapState(['answers']),
    ...mapStatePapers(['papers', 'count']),
  },
  created() {
    this.getPapers(this.params);
  },
  methods: {
    change(e) {
      this.page = e;
      this.getPapers(this.params);
    },
    // 删除答卷
    del(idd) {
      this.$confirm('此操作将永久删除该答卷, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        await this.getAnswers(idd);
        const { _id: id } = this.answers[0];
        await this.apis.deleteAnswers(id);
        localStorage.removeItem(`paperId-${this.idd}`);
        this.$message({
          type: 'success',
          message: '删除成功!',
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
    // 发布，添加答卷
    publish(id) {
      this.$router.push({
        name: 'HomePublish',
        params: { id },
      });
    },
    // 查看答卷
    answerSheet(id, papername) {
      this.$router.push({
        name: 'HomeAnswerSheet',
        params: { id, papername },
      });
    },
    // 分析答卷
    analysis(id, papername) {
      this.$router.push({
        name: 'HomeAnalysis',
        params: { id, papername },
      });
    },
    moment,
    ...mapActions(['getAnswers']),
    ...mapActionsPapers(['getPapers']),
  },
};
</script>
